@charset "utf-8";

/* 引入重置样式 */
//@import "./css/reset.css;

// REM
@function r($px){
    @return ($px/40) * 1rem;    
}

// 减半
@function half($px){
    @return ($px/2) * 1px;    
}


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body{
    height: 100%;
    position: relative;
}


//头部
header{  
    position: absolute;
    top: 0;
    width: r(750);
    height: half(105);
    padding-top:22px;
    padding-left: half(22);
    padding-right: 10px;
    box-sizing: border-box;
        .Back{ 
          
            width: half(123);
            height: half(57);
               background-color: #ffffff;
                border-radius: half(20);
                border: solid 1px #ff9344;
                p{ 
                    width: half(123);
                     height: half(57);
                    text-align: center;
                    line-height: half(57);
                    font-size: half(26);
                    color: #000000;
                }
        } 
    h1{ 
            width: r(80);
            text-align: center;
            height: 18px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #000000;
            margin:0 auto;
          margin-top: 8px;
    }
    .selectbox{
               width: half(159);
                 height: half(56);
              background-image: url(../img/xiala.png);
              background-repeat: no-repeat;
              background-position: right 4px center;
              background-size: 14px 10px;
       select{
                    padding-left: 8px;
                  width: half(159);
                 height: half(56);
                 -webkit-appearance: none;
                 appearance: none;
                   border: solid 1px #ff9344;
                   background: transparent;
        }
    }
  
    
}

section{
    position: absolute;
    top: half(105);
    bottom:half(135);
    width: r(750);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
        .kind{
            margin-top: r(18);
            width: 100%;
            height: r(184);
            .kindness{
             width:25%;
            height: r(184);
                img{
                    display: block;
                    margin: 0 auto;
                    width: r(148);
                    height: r(149);
                }
                span{
                    display: block;
                    text-align: center;
                    width: 100%;
                    height: r(34);
                    font-size: r(26);
                    height: r(34);
                    font-weight: normal;
                    font-stretch: normal;font-family: MicrosoftYaHei;
                }
            }
        }
       .dddd{
           margin-top: r(16);
           width: 100%;
           height: r(18);
           img{
               display: block;
                margin: 0 auto;
               width:r(93);
               height: r(18);
           }
       } 
        
     .youhui{ 
        width: r(750);
        height: half(105);
         background: white;   
        padding-left:half(21);
        padding-top: half(32);
        box-sizing: border-box;
        .youhui_logo{
          
            display: inline-block;
            width: half(220);
            height: half(62);
            vertical-align: top;
            .length{
                width: half(60);
                height: half(60);
            img{ 
            
                margin-top: 5px;
                width: half(54);
                height: half(42); 
                     
                  }   
             }         
            p{                 
                box-sizing: border-box;
                width: half(110);
                height: half(62);
                font-family: MicrosoftYaHei;
                font-size: half(30);
                font-weight: normal;
                font-stretch: normal;
              line-height: half(62);
                padding-left: half(8);
                color: #000000;
            }
           
          
        }
        
          .sport{
                .length{          
                     img{
                  margin-top: 5px;
                     width: half(47);
                      height: half(58);
                         } 
                    
                 }
                 p{
                        padding-top: 6px;
                    }
                } 
    }
    
        .youhui_more{ 
            display: inline-block;
            vertical-align: top;
            width: half(100);
            height: half(31);
            margin-top: half(19);
            margin-right: half(20);
            p{
                width:half(60);
                height: half(31);
                line-height:half(31);
                font-size: half(24);
                color: #000000;
                font-family: MicrosoftYaHei;
            }
            img{
                margin-left: half(8);
                width: half(25);
                height:half(31);
            }
        }
        
       .meishileitupian{
           margin-top: r(13);
           width: 100%;
           height: r(133);
           .foodtupian{
               width: 25%;
               height: r(133);
               img{
                   display: block;
                   margin: 0 auto;
                   width: r(133);
                   height: r(133);
               }
           }
       } 
        
        
}

//底部
footer{ 
    position: absolute;
    bottom: 0;
    width:r(750);
    height: half(150);   
    .foot{ 
        box-sizing: border-box;
        padding-top: half(17);
        width:r(187.5);
        height: half(150);
        background: transparent;
        img{
            display: block;
            width: half(71);
            height: half(73); 
            margin:0 auto;
            margin-top: half(5);
        }
        p{ 
            
            height: half(35);
            font-size: half(25);          
            padding-top: half(10);
            text-align: center;
            a{
                color: black;
            }
           }
}
}